<script setup lang="ts" >
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue';
import {
    bus
} from "@/utils/mitt.js"
// import { getProductList } from '@/api/product.js'
import { getAdminList, searchAccount, getAdminListLength, returnListData } from '@/api/userinfo.js'
import breadCrumb from '@/components/breadCrumb.vue'
import createAdmin from '../components/create_admin.vue'
import EditAdmin from '../components/edit_admin.vue'
import DeteAdmin from '../components/delete_admin.vue'

//面包屑
const item = ref({
    first: '用户管理',
    second: '消息管理员'
})
//显示哪个图标
const iconName = ref({
    name: 'set'
})
//输入框
const adminAccount = ref()
const searchAdmin = async () => {
    tableData.value = await searchAccount(adminAccount.value, '消息管理员')
}
const clearInput = () => { }
//获取实例
const create_admin = ref()
const edit_admin = ref()
const delete_admin = ref()
const openCreate = (id: number) => {
    bus.emit('createId', id)
    create_admin.value.open()
}
// id是当前操作的行
const openEdit = (id: number) => {
    bus.emit('editId', id)
    edit_admin.value.open()
}
const openDelete = (id: number) => {
    bus.emit('deleteId', id)
    delete_admin.value.open()
}
//分页
const paginationData = reactive({
    currentPage: 1,
    pageCount: 1,
})
//获取产品总人数，也就是length
const adminTotal = ref(0)
//表格内容展示
const tableData = ref([{}])

// console.log(tableData.value);
const getAdminListlength = async () => {
    const res = await getAdminListLength('消息管理员')
    adminTotal.value = res.length
    //算出分页数  ceil向上取整
    paginationData.pageCount = Math.ceil(res.length / 1)
}
getAdminListlength()
//获取第一页数据
const getFirstList = async () => {
    tableData.value = await returnListData(0, '消息管理员')

}
getFirstList()
//换页
const currentChange = async (value: number) => {
    // value-1原因 分页从0计算0是第一页
    tableData.value = await returnListData(value - 1, '消息管理员')
}

const getTableData = async () => {
    // tableData.value = await getAdminList('消息管理员')
    getAdminListlength()
}

// onBeforeUnmount(() => {
//     bus.all.clear()
// })
</script>

<template>
    <breadCrumb :item="item" :iconName="iconName" />
    <!-- 添加 -->
    <createAdmin ref="create_admin" @success="getTableData()" />
    <!-- 编辑 -->
    <EditAdmin ref="edit_admin" @success="getTableData()" />
    <!-- 删除 -->
    <DeteAdmin ref="delete_admin" @success="getTableData()" />
    <div class="table-wrapped">
        <div class="table-top">
            <div class="table-header">
                <div class="search-wrapped">
                    <el-input v-model="adminAccount" class="w-50 m-2" size="large" placeholder="输入账号进行搜索"
                        @change='searchAdmin()' clearable @clear="clearInput()">
                        <template #prefix>
                            <Search />
                        </template>
                    </el-input>
                </div>
                <div class="button-wrapped">
                    <div class="button-wrapped">
                        <el-button type="primary" @click="openCreate(3)"
                            style="background-color: rgb(172, 152, 97);">添加消息管理员</el-button>
                    </div>
                </div>
            </div>

            <!-- 表格内容 -->
            <div class="table-content">
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column type="index" width="50" />
                    <el-table-column prop="account" label="账号" />
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="department" label="部门" />
                    <el-table-column prop="email" label="邮箱" />
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <div>
                                <el-button type="success" @click="openEdit(row.id)">编辑</el-button>
                                <el-button type="danger" @click="openDelete(row.id)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="table-footer">
            <el-pagination :page-size="1" :current-page="paginationData.currentPage" :pager-count="7" :total="adminTotal"
                :page-count="paginationData.pageCount" @current-change="currentChange" layout="prev, pager, next" />
        </div>
    </div>
</template>